Attention : Pour que les popins fonctionnent correctement, il faut avoir un élément ayant pour id js-wrapper contenant toute la page.
Pour afficher une popin il faut cliquer sur un lien possédant la classe js-popin et un href désignant la page à afficher dans la popin.
Ce lien peut avoir deux attribut définissant la taille de la popin à créer et le type de popin
Tailles de la popin (data-popin-size) :
Types de la Popin (data-popin-type) :
Fermeture de la Popin au click sur la l'overlay en fond (data-bkg-close) :
Nombre de fichiers maximums (data-max-number-files) :
Time out de la requette Xhr (data-timeout) :
Ne garde pas de fichiers en erreur (data-acceptedErrorFiles) :
true or false : Si true alors la page se refresh et n'affiche pas le fichier en erreur.false.js requis :
<div id="js-wrapper">
<!--...--><a class="o-btn js-popin" href="components/popinWhiteNone.html" data-popin-size="medium" data-popin-type="none">Cliquer pour afficher a medium "none" popin</a>
</div>
<!--components/popinWhiteNone.html-->
<div class="u-white-text u-title u-text-center u-fullwidth">Quel type d'étude souhaitez-vous créer ?</div>
<div class="u-center">
<div class="o-card--mini u-center u-title--small u-text-center u-bubble">Controle de compactage</div>
<div class="o-card--mini u-center u-title--small u-text-center u-bubble">Reconnaissance de sol</div>
</div>
<div id="js-wrapper">
<!--...--><a class="o-btn js-popin" href="components/popinWelcome.html" data-popin-size="big" data-popin-type="welcome" data-max-number-files="5">Cliquer pour afficher la modale d'accueil</a>
<button class="mfp-close c-fonticon__icon-close"></button>
<div class="uframed">
<div class="u-center u-fullwidth">
<div class="u-title u-text-center">Les outils WebSprint</div>
</div>
</div><img src="assets/images/welcome.png"/>
<div class="u-center">
<div class="bloc">
<div class="u-text title">DataSprint</div>
<div class="u-text">À travers cet espace, vous pourrez télécharger et conserver vos données brutes, vos sondages, et tous les docuements nécessaires à l’élaboration et à l’impression de vos résulats.</div>
</div>
<div class="bloc">
<div class="u-text title">MineSprint</div>
<div class="u-text">À travers cet espace, vous pourrez traiter et interpréter vos pénétrogrammes en fonction de vos besoins : rapport de compactage, reconnaissance de sol et accéder à la bibliothèque de corrélations.</div>
</div>
</div>
<div class="u-center">
<div class="o-checkbox u-bubble">
<input type="checkbox" name=""/><span></span>
<label class="u-text" for="">Ne plus afficher ce message lors de mes prochaines connexions</label>
</div>
</div>
</div>
<div id="js-wrapper">
<!--...--><a class="o-btn js-popin" href="components/popinCardBig.html" data-popin-size="small" data-popin-type="card">liquer pour afficher la modale petite carte</a>
</div>
<div id="js-wrapper">
<!--...--><a class="o-btn js-popin" href="components/popinSettings.html" data-popin-size="big" data-popin-type="bulle">Cliquer pour afficher a small modale Préferences</a>
</div>
<div id="js-wrapper">
<!--...--><a class="o-btn js-popin fileUploader" href="components/popinFileUpload.html" data-popin-size="big" data-popin-type="bulle" data-max-number-files="5">Cliquer pour afficher a big "card" popin with File Upload</a>
</div>
<div id="js-wrapper">
<!--...--><a class="o-btn js-popin fileUploader" href="components/popinFileUpload.html" data-popin-size="big" data-popin-type="bulle" data-max-number-files="1">Cliquer pour afficher a big "card" popin with File Upload</a>
</div>
<div class="o-alert--error"><span class="c-fonticon__icon-error"></span><span class="c-msg">Message d’erreur lorem ipsum dolor sit amet</span><a class="c-close" href=""><span class="c-fonticon__icon-cross"></span></a></div>
<div class="o-alert--success"><span class="c-fonticon__icon-success"></span><span class="c-msg">Message de validation lorem ipsum dolor sit amet</span><a class="c-close" href=""><span class="c-fonticon__icon-cross"></span></a></div>
<div class="o-alert--module"><span class="c-fonticon__icon-success"></span><span class="c-msg">Message personalisé</span><a class="c-close" href=""><span class="c-fonticon__icon-cross"></span></a></div>
<div class="o-alert--info"><span class="c-fonticon__icon-info"></span><span class="c-msg">Message d’information lorem ipsum dolor sit amet</span><a class="c-close" href=""><span class="c-fonticon__icon-cross"></span></a></div>
<div id="js-wrapper">
<!--...--><a class="o-btn js-popin" href="components/popinWhiteBkgClose.html" data-popin-size="medium" data-popin-type="card" data-bkg-close="true">Cliquer pour afficher popin with background close</a>
</div>
<!--components/popinWhiteBkgClose.html-->
<div>
<div class="u-framed">
<div class="u-centerSpaceBetween u-fullwidth">
<div class="u-title--small">Ajouter un projet</div>
<button class="mfp-close c-fonticon__icon-close u-title--small"></button>
</div>
</div>
<form class="c-card__row u-framed u-column">
<div class="u-column u-fullwidth">
<label class="u-label">Intitulé</label>
<input type="text"/>
</div>
<div class="u-column u-fullwidth u-vFramed">
<label class="u-label">Description</label>
<textarea name="Desc" cols="30" rows="10" placeholder="Lorem Ipsum"></textarea>
</div>
</form>
<div class="c-card__row u-framed">
<div class="o-btn o-btn--light js-closePopUp">Fermer</div>
<button class="o-btn">Ajouter</button>
</div>
</div>